import { defineComponent, h, markRaw, ref, TransitionGroup, watch } from 'vue'
import DataNode from '../../ItemNode/DataNode.tsx'
import {
  ElButton,
  ElColorPicker,
  ElImage,
  ElInput,
  ElRadioButton,
  ElRadioGroup,
  ElText
} from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import { pushState, routerState } from '../../router/router'
import NText from '../NText/NText'
import { uploadFile, file2Base64 } from '../../utils'
import { staticUrl } from '../../request/request'

export default class NRouterLink extends DataNode {
  isNRouterLink = true
  isContainerNode = true
  isNavigationNode = true
  styleDisplay = 'flex'

  constructor(node?: NRouterLink) {
    super(node)

    if (!node) {
      this.path = './components/NRouterLink/NRouterLink.tsx'
      this.name = '导航链接'

      const style = this.props.style
      this.props.style = {
        ...style,
        color: '#666',
        cursor: 'pointer',
        minWidth: '50px',
        minHeight: '16px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        paddingTop: '5px',
        paddingRight: '5px',
        paddingBottom: '5px',
        paddingLeft: '5px',
        display: this.styleDisplay,
        flexWrap: 'nowrap',
        flexDirection: 'row',
        justifyContent: 'start',
        alignContent: 'start',
        alignItems: 'start',
        rowGap: '0px',
        columnGap: '0px'
      }

      this.props.backgroundImage = ''

      this.props.activeStyle = {
        color: 'initial',
        backgroundColor: 'initial'
      }

      this.props.activeBackgroundImage = ''

      this.props.data = []
      this.props.dataUrl = ''
      this.props.dataFn = 'function () {\n  return null\n}'
      this.props.dataFnable = true

      this.props.routeName = ''
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          watch(
            () => this.props.data,
            () => {
              if (this.props.dataFnable) this.props.routeName = this.props.data ?? ''
            },
            { immediate: true }
          )

          const handleStyle = () => {
            if (routerState.value.at(-1) == this.props.routeName) {
              return {
                ...this.props.activeStyle,
                backgroundImage: `url(${staticUrl(this.props.activeBackgroundImage)})`
              }
            }

            return { backgroundImage: `url(${staticUrl(this.props.backgroundImage)})` }
          }

          return () => (
            <pComponent
              class="container"
              style={handleStyle()}
              onClick={() => pushState(this.props.routeName)}
            >
              <TransitionGroup name="list">
                {() => this.children.map((child, i) => h(child.component, { key: child.uuid }))}
              </TransitionGroup>
            </pComponent>
          )
        },
        {
          name: 'NRouterLink'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        const text = new NText()
        text.props.dataFnable = false
        text.props.content = '内容'
        text.props.color = ['var(--color-font-1)']
        this.add(text)

        return () => (
          <pView>
            <this.component></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                路由名
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.routeName} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                字体颜色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  v-model={this.props.style.color}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                背景色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.style.backgroundColor}
                  onUpdate:modelValue={(v) => (this.props.style.backgroundColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                背景图片
              </ElText>
              <div class={classes['params-item-content']}>
                {this.props.backgroundImage ? (
                  <>
                    <ElImage
                      style="width: 50px"
                      src={staticUrl(this.props.backgroundImage)}
                      fit="contain"
                    ></ElImage>
                  </>
                ) : null}

                <ElInput
                  v-model={this.props.backgroundImage}
                  placeholder="图片地址"
                  size="small"
                  clearable
                ></ElInput>
                <ElButton
                  type="primary"
                  size="small"
                  onClick={() => {
                    uploadFile((file) => {
                      file2Base64(file).then((res) => (this.props.backgroundImage = res))
                    })
                  }}
                >
                  选择背景图
                </ElButton>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                路由激活字体颜色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  v-model={this.props.activeStyle.color}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                路由激活背景色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  v-model={this.props.activeStyle.backgroundColor}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                路由激活背景图
              </ElText>
              <div class={classes['params-item-content']}>
                {this.props.activeBackgroundImage ? (
                  <>
                    <ElImage
                      style="width: 50px"
                      src={staticUrl(this.props.activeBackgroundImage)}
                      fit="contain"
                    ></ElImage>
                  </>
                ) : null}

                <ElInput
                  v-model={this.props.activeBackgroundImage}
                  placeholder="图片地址"
                  size="small"
                  clearable
                ></ElInput>
                <ElButton
                  type="primary"
                  size="small"
                  onClick={() => {
                    uploadFile((file) => {
                      file2Base64(file).then((res) => (this.props.activeBackgroundImage = res))
                    })
                  }}
                >
                  选择激活背景图
                </ElButton>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                换行
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup
                  modelValue={this.props.style.flexWrap}
                  onUpdate:modelValue={(v) => (this.props.style.flexWrap = v)}
                >
                  <ElRadioButton value="wrap" label="换行" size="small"></ElRadioButton>
                  <ElRadioButton value="nowrap" label="不换行" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴方向
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.flexDirection}>
                  <ElRadioButton value="row" label="文本方向/横向" size="small"></ElRadioButton>
                  <ElRadioButton value="row-reverse" label="反横向" size="small"></ElRadioButton>
                  <ElRadioButton value="column" label="块方向/纵向" size="small"></ElRadioButton>
                  <ElRadioButton value="column-reverse" label="反纵向" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.justifyContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                  <ElRadioButton
                    value="space-between"
                    label="两端对齐"
                    size="small"
                  ></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴子项对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignItems}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="stretch" label="填满" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                行间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.rowGap} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                列间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.columnGap} size="small"></ElInput>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }
}
